<template>
  <div class="bridge">
    <el-card class="box-card right">
      <div class="flexBetween">
        <div class="flex">
          <!-- <el-select
            v-model="regionCode"
            placeholder="请选择省"
            size="small"
            @change="changeRegion(regionCode)"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select>
          <el-select
            v-model="cityCode"
            placeholder="请选择市"
            size="small"
            class="paddingLeft"
            @change="changeCity(cityCode)"
            clearable
          >
            <el-option
              v-for="item in cityOptions"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select>
          <el-select
            v-model="areaCode"
            placeholder="请选择区"
            size="small"
            class="paddingLeft"
            clearable
          >
            <el-option
              v-for="item in areaOptions"
              :key="item.regionCode"
              :label="item.regionName"
              :value="item.regionCode"
            ></el-option>
          </el-select> -->
          <el-input placeholder="请输入桥组名称" v-model.trim="groupName" size="small" class="paddingLeft" style="width: 200px" clearable></el-input>
          <el-button type="primary" size="small" class="paddingLeft" style="font-weight: 900" @click="queryBridgeGroup(1)">查询</el-button>
        </div>
        <div>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addDialogEquipment">新增桥组</el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{ background: '#8595B9', color: '#fff', height: '44px' }"
        class="tableTop"
        stripe
        max-height="600"
        size="small"
        @expand-change="expand"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.children" stripe size="small">
              <el-table-column label="桥梁名称" prop="name" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-tooltip content="桥梁详情">
                    <el-button type="text" @click="detail(scope.row)">{{ scope.row.name }}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="桥梁编码" prop="code" show-overflow-tooltip></el-table-column>
              <el-table-column label="桥梁类型" prop="bridgeTypeName" show-overflow-tooltip></el-table-column>
              <el-table-column label="桥梁全长(m)" prop="length" show-overflow-tooltip></el-table-column>
              <el-table-column label="缩略图" prop="area" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-image
                    style="width: 50px; height: 50px; margin-top: 10px"
                    :src="download + scope.row.realisticPictureList[0].path"
                    :preview-src-list="[download + scope.row.realisticPictureList[0].path]"
                    v-if="scope.row.realisticPictureList.length > 0"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column label="区域" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>
                    {{ scope.row.provinceName }}
                    <span v-if="scope.row.municipalityName && scope.row.municipalityName !== ''">/{{ scope.row.municipalityName }}</span>
                    <span v-if="scope.row.regionName && scope.row.regionName !== ''">/{{ scope.row.regionName }}</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="备注" prop="desc" show-overflow-tooltip></el-table-column>
              <el-table-column label="是否启用" prop="status" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.status === 1 ? '启用' : scope.row.status === 0 ? '停用' : '' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-tooltip content="设备管理">
                    <el-button type="text" @click="toEquip(scope.row)">
                      <img src="../../assets/images/pages/setting.png" style="width: 14px; height: 14px" />
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="模型管理">
                    <el-button type="text" @click="model(scope.row)">
                      <img src="../../assets/images/pages/model.png" style="width: 14px; height: 14px" />
                    </el-button>
                  </el-tooltip>
                  <el-tooltip content="修改">
                    <el-button type="text" icon="el-icon-edit-outline" @click="edit(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除">
                    <el-button type="text" icon="el-icon-delete" style="color: red !important" @click="removeBridge(scope.row)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="groupName" show-overflow-tooltip></el-table-column>
        <el-table-column label="编码" prop="code" show-overflow-tooltip></el-table-column>
        <el-table-column label="区域" prop="area" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>
              {{ scope.row.provinceName }}
              <span v-if="scope.row.municipalityName && scope.row.municipalityName !== ''">/{{ scope.row.municipalityName }}</span>
              <span v-if="scope.row.regionName && scope.row.regionName !== ''">/{{ scope.row.regionName }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-tooltip content="新增桥梁">
              <el-button type="text" icon="el-icon-plus" @click="addEquipment(scope.row.id)"></el-button>
            </el-tooltip>
            <el-tooltip content="修改">
              <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除">
              <el-button type="text" icon="el-icon-delete" style="color: red !important" @click="deleteGroup(scope.row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :page-count="pageNum" @current-change="changeCurrent"></el-pagination>
      </div>
    </el-card>
    <!--  新增桥组 -->
    <vx-popup :title="groupTitle" width="410px" @close="pontinecancel" :active.sync="addVisible" @confirmPopup="pontineAdd" @cancelPopup="pontinecancel">
      <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="桥组名称:" prop="groupName">
          <el-input v-model.trim="addForm.groupName" size="small" clearable placeholder="请输入桥组名称"></el-input>
        </el-form-item>
        <el-form-item label="桥组编号:" prop="code">
          <el-input v-model.trim="addForm.code" size="small" clearable placeholder="请输入桥组编号"></el-input>
        </el-form-item>
        <el-form-item label="所属省:" prop="provinceCode">
          <el-select v-model="addForm.provinceCode" placeholder="请选择省" size="small" @change="changeAddRegion(addForm.provinceCode)" clearable>
            <el-option v-for="item in options" :key="item.regionCode" :label="item.regionName" :value="item.regionCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属市:" prop="municipalityCode">
          <el-select v-model="addForm.municipalityCode" placeholder="请选择市" size="small" class="paddingLeft" @change="changeAddCity(addForm.municipalityCode)" clearable>
            <el-option v-for="item in addCityOptions" :key="item.regionCode" :label="item.regionName" :value="item.regionCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属区:" prop="regionCode">
          <el-select v-model="addForm.regionCode" placeholder="请选择区" size="small" class="paddingLeft" @change="changeArea(addForm.regionCode)" clearable>
            <el-option v-for="item in addAreaOptions" :key="item.regionCode" :label="item.regionName" :value="item.regionCode"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </vx-popup>
    <!--  新增桥组 -->
    <el-dialog title="保存成功" :visible.sync="saveVisible" width="680px">
      <p>保存成功，是否进行下一步？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBridge">取 消</el-button>
        <el-button type="primary" @click="savedDalogVisible">新建桥梁</el-button>
      </span>
    </el-dialog>
    <!-- 新增桥梁 -->
    <vx-popup :title="addtitle" width="900px" @close="cancelFormSubmit" :active.sync="dialogVisible" @confirmPopup="submit" @cancelPopup="cancelFormSubmit">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row justify="space-between" :gutter="24">
          <el-col :span="8">
            <el-form-item label="桥梁名称:" prop="name">
              <el-input v-model.trim="ruleForm.name" size="small" clearable placeholder="请输入桥梁名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="桥梁编码:" prop="code">
              <el-input v-model.trim="ruleForm.code" size="small" clearable placeholder="请输入桥梁编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="桥梁全长:" prop="length"> <el-input class="inputWidth" v-model.trim="ruleForm.length" size="small" clearable placeholder="请输入桥梁全长"></el-input>米 </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="24">
          <el-col :span="8">
            <el-form-item label="桥梁规范:" prop="standardId">
              <el-select v-model="ruleForm.standardId" placeholder="请选择桥梁规范" size="small" @change="changeStandardId" clearable>
                <el-option v-for="(item, index) in standardList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="桥梁类型:" prop="bridgeTypeId">
              <el-select v-model="ruleForm.bridgeTypeId" placeholder="请选择桥梁类型" size="small" @change="changeType" clearable>
                <el-option v-for="(item, index) in bridgeList" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="桥梁种类:" prop="bridgeKindId">
              <el-select v-model="ruleForm.bridgeKindId" placeholder="请选择桥梁种类" size="small" @change="changeKind" clearable>
                <el-option v-for="(item, index) in kindList" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="24">
          <el-col :span="8">
            <el-form-item label="养护类别:" prop="maintenanceType">
              <el-select v-model="ruleForm.maintenanceType" placeholder="请选择养护类别" size="small" @change="changeMaintenanceType" clearable>
                <el-option v-for="(item, index) in mainList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="养护级别:" prop="maintenanceLevel">
              <el-select v-model="ruleForm.maintenanceLevel" placeholder="请选择养护级别" size="small" clearable>
                <el-option v-for="(item, index) in typeList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运行状态:" prop="status">
              <el-radio-group v-model="ruleForm.status" size="small">
                <el-radio :label="0">停用</el-radio>
                <el-radio :label="1">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="24">
          <el-col :span="8">
            <el-form-item label="所属省:" prop="provinceCode">
              <el-select v-model="ruleForm.provinceCode" placeholder="请选择省" size="small" @change="changeRuleRegion(ruleForm.provinceCode)" clearable>
                <el-option v-for="item in options" :key="item.regionCode" :label="item.regionName" :value="item.regionCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属市:" prop="municipalityCode">
              <el-select v-model="ruleForm.municipalityCode" placeholder="请选择市" size="small" @change="changeRuleCity(ruleForm.municipalityCode)" clearable>
                <el-option v-for="item in ruleCityOptions" :key="item.regionCode" :label="item.regionName" :value="item.regionCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属区:" prop="regionCode">
              <el-select v-model="ruleForm.regionCode" placeholder="请选择区" size="small" @change="changeRuleArea(ruleForm.regionCode)" clearable>
                <el-option v-for="item in ruleAreaOptions" :key="item.regionCode" :label="item.regionName" :value="item.regionCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="桥梁位置:">
              <div v-if="addtitle === '新增桥梁'">
                <div class="map_box" id="map">
                  <!-- <el-input
                v-model.trim="address"
                id="suggestId"
                name="ruleForm.address"
                size="small"
                class="item"
                placeholder="请输入关键字"
              ></el-input> -->
                </div>
              </div>
              <div v-if="addtitle === '修改桥梁'" style="width: 360px">
                <div class="map_box" id="mapContaion">
                  <!-- <el-input
                v-model.trim="address"
                id="suggestId"
                name="ruleForm.address"
                size="small"
                class="item"
                placeholder="请输入关键字"
              ></el-input> -->
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="桥梁简介:" prop="desc">
          <el-input type="textarea" v-model.trim="ruleForm.desc" maxlength="500" show-word-limit size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="桥梁图片:" prop="realisticPictureList">
          <el-upload :action="upload" list-type="picture-card" :on-remove="removeRender" :on-success="handleSuccessRender" :file-list="imgList" :limit="1">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </vx-popup>
  </div>
</template>
<script>
// 滚动条
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
import { deepClone } from '@/util.js'
import base from '../../api/base'
export default {
  data() {
    return {
      upload: base.UPLOADURL,
      download: base.DOWNLOADURL,
      imgList: [],
      address: '',
      addtitle: '新增桥梁',
      groupTitle: '新增桥组',
      addVisible: false, //桥组显示隐藏
      saveVisible: false, //保存弹框
      dialogVisible: false,
      mapContent: false,
      options: [],
      cityOptions: [],
      areaOptions: [],
      addCityOptions: [],
      addAreaOptions: [],
      ruleCityOptions: [],
      ruleAreaOptions: [],
      groupName: '',
      regionCode: '',
      cityCode: '',
      areaCode: '',
      pageNum: 1,
      pageSize: 10,
      loading: true,
      index: false,
      tableData: [],
      total: 0,
      addForm: {
        groupName: '',
        code: '',
        regionCode: '',
        municipalityCode: '',
        provinceCode: '',
        regionName: '',
        municipalityName: '',
        provinceName: '',
      },
      addRules: {
        groupName: [{ required: true, message: '请输入桥组名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入桥组编号', trigger: 'blur' }],
        provinceCode: [{ required: true, message: '请选择所属省', trigger: 'change' }],
        municipalityCode: [{ required: true, message: '请选择所属市', trigger: 'change' }],
        regionCode: [{ required: true, message: '请选择所属区', trigger: 'change' }],
      },
      add: false,
      bridgeList: [],
      standardList: [
        {
          label: '城市桥梁规范',
          value: '0',
        },
        {
          label: '公路桥梁规范',
          value: '1',
        },
      ],
      kindList: [],
      mainList: [
        {
          label: 'Ⅰ类养护',
          value: '0',
        },
        {
          label: 'Ⅱ类养护',
          value: '1',
        },
        {
          label: 'Ⅲ类养护',
          value: '2',
        },
        {
          label: 'Ⅳ类养护',
          value: '3',
        },
        {
          label: 'Ⅴ类养护',
          value: '4',
        },
      ],
      typeList: [
        {
          value: '0',
          label: 'Ⅰ',
        },
        {
          value: '1',
          label: 'Ⅱ',
        },
        {
          value: '2',
          label: 'Ⅲ',
        },
      ],
      ruleForm: {
        name: '',
        code: '',
        bridgeTypeId: '',
        bridgeTypeName: '',
        bridgeKindId: '',
        bridgeKindName: '',
        length: '',
        lat: '',
        lng: '',
        status: 1,
        desc: '',
        maintenanceType: '',
        maintenanceLevel: '',
        regionCode: '',
        municipalityCode: '',
        provinceCode: '',
        regionName: '',
        municipalityName: '',
        provinceName: '',
        standardId: '',
        standardName: '',
        realisticPictureList: [],
      },
      rules: {
        name: [{ required: true, message: '请输入桥梁名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入桥梁编码', trigger: 'blur' }],
        length: [{ required: true, message: '请输入桥梁长度', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入桥梁简介', trigger: 'blur' }],
        standardId: [{ required: true, message: '请选择桥梁规范', trigger: 'change' }],
        bridgeTypeId: [{ required: true, message: '请选择桥梁类型', trigger: 'change' }],
        bridgeKindId: [{ required: true, message: '请选择桥梁种类', trigger: 'change' }],
        provinceCode: [{ required: true, message: '请选择所属省', trigger: 'change' }],
        municipalityCode: [{ required: true, message: '请选择所属市', trigger: 'change' }],
        maintenanceType: [{ required: true, message: '请选择养护类别', trigger: 'change' }],
        maintenanceLevel: [{ required: true, message: '请选择养护级别', trigger: 'change' }],
        regionCode: [{ required: true, message: '请选择所属区', trigger: 'change' }],
        status: [{ required: true, message: '请选择运行状态', trigger: 'change' }],
        realisticPictureList: [{ required: true, message: '请上传桥梁图片', trigger: 'change' }],
      },
      groupId: '',
    }
  },
  created() {
    this.getArea(100000, (data) => {
      this.options = data
    })
    this.queryBridgeGroup(1)
    this.findDataTypeList()
  },
  components: {
    VuePerfectScrollbar,
  },
  methods: {
    //跳转到设备
    toEquip(row) {
      this.$router.push({ path: '/bridgeInformation/equipmentManagement', query: { id: row.id } })
    },
    //省市查询
    getArea(id, callback) {
      this.$api.bridge.queryBridgeRegion({ parentId: id }).then((res) => {
        if (res.data.success) {
          return callback(res.data.data)
        }
      })
    },
    //桥梁种类
    findDataTypeList() {
      let data = {
        pId: 0,
        type: 1,
        isDelete: 0,
      }
      this.$api.bridge.findDataTypeList(data).then((res) => {
        if (res.data.success) {
          this.kindList = res.data.data
        }
      })
    },
    //搜索框省
    changeRegion(val) {
      this.cityOptions = []
      this.cityCode = ''
      this.areaOptions = []
      this.areaCode = ''
      this.getArea(val, (data) => {
        this.cityOptions = data
      })
    },
    //搜索框市
    changeCity(val) {
      this.areaOptions = []
      this.areaCode = ''
      this.getArea(val, (data) => {
        this.areaOptions = data
      })
    },
    changeAddRegion(val) {
      this.addAreaOptions = []
      this.addForm.regionCode = ''
      this.addForm.regionName = ''
      this.addCityOptions = []
      this.addForm.municipalityCode = ''
      this.addForm.municipalityName = ''
      this.getArea(val, (data) => {
        this.addCityOptions = data
      })
      this.options.map((v) => {
        if (v.regionCode === val) {
          this.addForm.provinceName = v.regionName
        }
      })
    },
    changeAddCity(val) {
      this.addAreaOptions = []
      this.addForm.regionCode = ''
      this.addForm.regionName = ''
      this.getArea(val, (data) => {
        this.addAreaOptions = data
      })
      this.addCityOptions.map((v) => {
        if (v.regionCode === val) {
          this.addForm.municipalityName = v.regionName
        }
      })
    },
    changeArea(val) {
      this.addAreaOptions.map((v) => {
        if (v.regionCode === val) {
          this.addForm.regionName = v.regionName
        }
      })
    },
    changeRuleRegion(val) {
      this.ruleAreaOptions = []
      this.ruleForm.regionCode = ''
      this.ruleForm.regionName = ''
      this.ruleCityOptions = []
      this.ruleForm.municipalityCode = ''
      this.ruleForm.municipalityName = ''
      this.getArea(val, (data) => {
        this.ruleCityOptions = data
      })
      this.options.map((v) => {
        if (v.regionCode === val) {
          this.ruleForm.provinceName = v.regionName
        }
      })
    },
    changeRuleCity(val) {
      this.ruleAreaOptions = []
      this.ruleForm.regionCode = ''
      this.ruleForm.regionName = ''
      this.getArea(val, (data) => {
        this.ruleAreaOptions = data
      })
      this.ruleCityOptions.map((v) => {
        if (v.regionCode === val) {
          this.ruleForm.municipalityName = v.regionName
        }
      })
    },
    changeRuleArea(val) {
      this.ruleAreaOptions.map((v) => {
        if (v.regionCode === val) {
          this.ruleForm.regionName = v.regionName
        }
      })
    },
    //桥梁规范
    changeStandardId(val) {
      this.ruleForm.bridgeTypeId = ''
      this.queryBridgeTypeList(val)
      this.standardList.map((v) => {
        if (v.value === val) {
          this.ruleForm.standardName = v.label
        }
      })
    },
    changeType(val) {
      this.bridgeList.map((v) => {
        if (v.id === val) {
          this.ruleForm.bridgeTypeName = v.name
        }
      })
    },
    changeKind(val) {
      this.kindList.map((v) => {
        if (v.value === val) {
          this.ruleForm.bridgeKindName = v.label
        }
      })
    },
    //养护类型
    changeMaintenanceType(val) {
      this.ruleForm.maintenanceLevel = ''
    },
    //桥梁类型
    queryBridgeTypeList(id) {
      this.$api.bridge.queryBridgeTypeList({ standardId: id }).then((res) => {
        if (res.data.success) {
          this.bridgeList = res.data.data[0]
        }
      })
    },
    //桥组查询
    queryBridgeGroup(val) {
      if (val) {
        this.pageNum = 1
      }
      let data = {
        provinceCode: this.regionCode,
        municipalityCode: this.cityCode,
        regionCode: this.areaCode,
        groupName: this.groupName,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }
      this.$api.bridge.queryBridgeGroup(data).then((res) => {
        if (res.data.success) {
          let _obj = deepClone(res.data.data.currentPageData)
          _obj.forEach((item, index) => {
            item.children = []
          })
          this.tableData = deepClone(_obj)
          this.total = res.data.data.instanceList.length
          this.loading = false
        }
      })
    },
    changeCurrent(val) {
      this.pageNum = val
      this.queryBridgeGroup()
    },
    resetGroup() {
      this.addForm = {
        groupName: '',
        code: '',
        regionCode: '',
        municipalityCode: '',
        provinceCode: '',
        regionName: '',
        municipalityName: '',
        provinceName: '',
      }
    },
    // 新增桥组
    addDialogEquipment() {
      this.groupTitle = '新增桥组'
      this.$refs['addForm'].resetFields()
      this.addVisible = true
      this.cityOptions = []
      this.areaOptions = []
    },
    // 桥组修改弹框
    handelEdit(val) {
      this.groupTitle = '修改桥组'
      if (val.municipalityCode && val.municipalityCode !== '') {
        this.changeAddRegion(val.provinceCode)
      }
      if (val.regionCode && val.regionCode !== '') {
        this.changeAddCity(val.municipalityCode)
        this.changeArea(val.regionCode)
      }
      this.addForm = JSON.parse(JSON.stringify(val))
      this.addVisible = true
    },
    //删除桥组
    deleteGroup(val) {
      this.$confirm('此操作将删除桥组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.bridge.deleteBridgeGroupById({ id: val }).then((res) => {
            if (res.data.success) {
              this.$vs.notify({
                text: '删除成功',
                color: 'success',
              })
              this.queryBridgeGroup()
            }
          })
        })
        .catch(() => {})
    },
    // 取消桥组
    pontinecancel() {
      this.addVisible = false
      this.resetGroup()
    },
    // 桥组确认
    pontineAdd() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          if (this.groupTitle === '新增桥组') {
            this.$api.bridge.addBridgeGroup(this.addForm).then((res) => {
              if (res.data.success) {
                this.$vs.notify({
                  text: '新增桥组成功',
                  color: 'success',
                })
                this.addVisible = false
                this.resetGroup()
                this.queryBridgeGroup()
              }
            })
          } else {
            let data = {
              id: this.addForm.id,
              groupName: this.addForm.groupName,
              code: this.addForm.code,
              regionCode: this.addForm.regionCode,
              municipalityCode: this.addForm.municipalityCode,
              provinceCode: this.addForm.provinceCode,
              regionName: this.addForm.regionName,
              municipalityName: this.addForm.municipalityName,
              provinceName: this.addForm.provinceName,
              cache: this.addForm.cache,
              dp: this.addForm.dp,
              type: this.addForm.type,
              deleted: this.addForm.deleted,
              assembly: this.addForm.assembly,
            }
            this.$api.bridge.updateBridgeGroupById(data).then((res) => {
              if (res.data.success) {
                this.$vs.notify({
                  text: '修改桥组成功',
                  color: 'success',
                })
                this.addVisible = false
                this.resetGroup()
                this.queryBridgeGroup()
              }
            })
          }
        } else {
          return false
        }
      })
    },
    // 桥梁详情
    detail(val) {
      let facadeFolderId = ''
      if (val.facadeFolderId) {
        facadeFolderId = val.facadeFolderId
      }
      let realisticPictureFolderId = ''
      if (val.realisticPictureFolderId) {
        realisticPictureFolderId = val.realisticPictureFolderId
      }
      this.$router.push({
        path: '/bridgeInformation/bridgeDetail',
        query: { desc: val.desc, id: val.id, realisticPictureFolderId: realisticPictureFolderId, facadeFolderId: facadeFolderId },
      })
    },
    //表格展开
    expand(row, index) {
      this.index = !this.index
      this.queryBridgeBasicByParentId(row.id)
    },
    //获取桥梁
    queryBridgeBasicByParentId(id) {
      this.$api.bridge.queryBridgeBasicByParentId({ groupId: id }).then((res) => {
        if (res.data.success) {
          this.tableData.forEach((item, index) => {
            if (id === item.id) item.children = res.data.data[0]
          })
        }
      })
    },
    handleSuccessRender(res, file) {
      this.ruleForm.realisticPictureList.push({
        path: res.data.successFiles[0].filePath,
        id: res.data.successFiles[0].id,
      })
    },
    removeRender() {
      this.ruleForm.realisticPictureList = []
    },
    // 新增弹框
    addEquipment(val) {
      this.addtitle = '新增桥梁'
      this.$refs['ruleForm'].resetFields()
      this.imgList = []
      this.$nextTick(function () {
        var th = this
        var map = new T.Map('map')
        map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12)
        var miniMap = new T.Control.OverviewMap({
          isOpen: true,
          size: new T.Point(100, 100),
        })
        map.addControl(miniMap)
        map.addEventListener('click', MapClick)
        function MapClick(e) {
          map.clearOverLays()
          var marker = []
          marker.push(e.lnglat.getLng())
          marker.push(e.lnglat.getLat())
          // console.log(marker)
          map.addOverLay(new T.Marker(new T.LngLat(marker[0], marker[1])))
          th.ruleForm.lng = marker[0]
          th.ruleForm.lat = marker[1]
        }
      })
      this.dialogVisible = true
      this.groupId = val
    },
    //编辑桥梁
    edit(val) {
      this.addtitle = '修改桥梁'
      this.changeStandardId(val.standardId)
      if (val.municipalityCode && val.municipalityCode !== '') {
        this.changeRuleRegion(val.provinceCode)
      }
      if (val.regionCode && val.regionCode !== '') {
        this.changeRuleCity(val.municipalityCode)
        this.changeRuleArea(val.regionCode)
      }
      let imageUrl = this.download + val.realisticPictureList[0].path
      let obj = {
        name: '111.png',
        url: imageUrl,
      }
      this.imgList = [obj]
      this.ruleForm = JSON.parse(JSON.stringify(val))
      this.$nextTick(function () {
        var th = this
        var map = new T.Map('mapContaion')
        map.centerAndZoom(new T.LngLat(th.ruleForm.lng, th.ruleForm.lat), 12)
        map.addOverLay(new T.Marker(new T.LngLat(th.ruleForm.lng, th.ruleForm.lat)))
        map.addEventListener('click', MapClick)
        function MapClick(e) {
          map.clearOverLays()
          var marker = []
          marker.push(e.lnglat.getLng())
          marker.push(e.lnglat.getLat())
          // console.log(marker)
          map.addOverLay(new T.Marker(new T.LngLat(marker[0], marker[1])))
          th.ruleForm.lng = marker[0]
          th.ruleForm.lat = marker[1]
        }
      })
      this.dialogVisible = true
    },
    //删除桥梁
    removeBridge(val) {
      this.$confirm('此操作将删除桥梁, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.bridge.removeBridgeBasicById({ id: val.id }).then((res) => {
            if (res.data.success) {
              this.$vs.notify({
                text: '删除成功',
                color: 'success',
              })
              this.queryBridgeBasicByParentId(val.groupId)
            }
          })
        })
        .catch(() => {})
    },
    savedDalogVisible() {
      this.saveVisible = false
      this.dialogVisible = true
    },
    cancelBridge() {
      this.saveVisible = false
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    resetBridge() {
      this.ruleForm = {
        name: '',
        code: '',
        bridgeTypeId: '',
        bridgeTypeName: '',
        bridgeKindId: '',
        bridgeKindName: '',
        length: '',
        lat: '',
        lng: '',
        status: 1,
        desc: '',
        maintenanceType: '',
        maintenanceLevel: '',
        regionCode: '',
        municipalityCode: '',
        provinceCode: '',
        regionName: '',
        municipalityName: '',
        provinceName: '',
        standardId: '',
        standardName: '',
        realisticPictureList: [],
      }
    },
    cancelFormSubmit() {
      this.dialogVisible = false
      this.resetBridge()
      this.addtitle = ''
    },
    //桥梁新增
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.ruleForm.lng !== '') {
            if (this.addtitle === '新增桥梁') {
              this.$api.bridge.addBridgeBasic({ ...this.ruleForm, groupId: this.groupId }).then((res) => {
                if (res.data.success) {
                  this.$vs.notify({
                    text: '新增桥梁成功',
                    color: 'success',
                  })
                  this.dialogVisible = false
                  this.resetBridge()
                  this.queryBridgeBasicByParentId(this.groupId)
                }
              })
            } else {
              let data = {
                name: this.ruleForm.name,
                code: this.ruleForm.code,
                bridgeTypeId: this.ruleForm.bridgeTypeId,
                bridgeTypeName: this.ruleForm.bridgeTypeName,
                bridgeKindId: this.ruleForm.bridgeKindId,
                bridgeKindName: this.ruleForm.bridgeKindName,
                length: this.ruleForm.length,
                lat: this.ruleForm.lat,
                lng: this.ruleForm.lng,
                status: this.ruleForm.status,
                desc: this.ruleForm.desc,
                maintenanceType: this.ruleForm.maintenanceType,
                maintenanceLevel: this.ruleForm.maintenanceLevel,
                regionCode: this.ruleForm.regionCode,
                municipalityCode: this.ruleForm.municipalityCode,
                provinceCode: this.ruleForm.provinceCode,
                regionName: this.ruleForm.regionName,
                municipalityName: this.ruleForm.municipalityName,
                provinceName: this.ruleForm.provinceName,
                standardId: this.ruleForm.standardId,
                standardName: this.ruleForm.standardName,
                realisticPictureList: this.ruleForm.realisticPictureList,
                id: this.ruleForm.id,
                groupId: this.ruleForm.groupId,
                bimFolderId: this.ruleForm.bimFolderId,
                diseaseFolderId: this.ruleForm.diseaseFolderId,
                maintenanceFolderId: this.ruleForm.maintenanceFolderId,
                facadeFolderId: this.ruleForm.facadeFolderId,
                realisticPictureFolderId: this.ruleForm.realisticPictureFolderId,
              }
              this.$api.bridge.updateBridgeBasic(data).then((res) => {
                if (res.data.success) {
                  this.$vs.notify({
                    text: '修改桥梁成功',
                    color: 'success',
                  })
                  this.dialogVisible = false
                  this.queryBridgeBasicByParentId(this.ruleForm.groupId)
                  this.resetBridge()
                }
              })
            }
          } else {
            this.$vs.notify({
              text: '请选择桥梁位置',
              color: 'danger',
            })
          }
        }
      })
    },
    model(val) {
      this.$router.push({
        path: '/bridgeInformation/modelManagement',
        query: { id: val.id, detail: val },
      })
    },
  },
}
</script>
<style lang="scss">
.inputWidth {
  width: 140px;
}
.amap-sug-result {
  z-index: 999999;
}
</style>
<style scoped lang="scss">
/deep/.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 30px;
}
/deep/.el-table__row {
  height: 30px;
}
.cell {
  max-height: 34px !important;
}
.bridge {
  width: 100%;
  height: 86vh;
  display: flex;
  justify-content: space-between;
  position: relative;
  .right {
    width: 100%;
    height: 100%;
    .flexBetween {
      display: flex;
      justify-content: space-between;
      .paddingLeft {
        margin-left: 20px;
      }
    }
    .tableTop {
      margin-top: 20px;
      height: calc(60% - 10px);
    }
    .page {
      position: absolute;
      left: 45%;
      bottom: 40px;
    }
  }
}
/deep/.el-dialog__title {
  color: #177dff;
  font-size: 2rem;
  text-align: center;
}
/deep/.el-dialog__header {
  text-align: center;
  padding: 34px 20px 10px;
  margin-top: 36vh;
}
/deep/.el-upload--picture-card {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 28px;
}
/deep/.el-upload-list--picture-card .el-upload-list__item {
  width: 60px;
  height: 60px;
}
.map_box {
  width: 640px;
  height: 200px;
  background: gainsboro;
  margin-top: 20px;
  position: relative;
  .item {
    position: absolute;
    z-index: 10000;
    width: 140px;
    top: 10px;
    right: 30px;
  }
}
</style>
